import React from 'react'
import { createBehavior, createResource } from '@designable/core'
import { DnFC, useNodeIdProps } from '@designable/react'
import { createFieldSchema } from '../Field'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'
import { Timeline as CustomTimeline } from '../../customComponents'

export const Timeline: DnFC<React.ComponentProps<typeof CustomTimeline>> = (
  props
) => {
  const nodeIdProps = useNodeIdProps()
  return (
    <div {...nodeIdProps}>
      <CustomTimeline
        {...props}
        value={[
          { remark: '示例标题1', createTime: '2024-01-01 10:00:00' },
          { remark: '示例标题2', createTime: '2024-01-02 11:00:00' },
        ]}
      />
    </div>
  )
}
Timeline.Behavior = createBehavior({
  name: 'Timeline',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'Timeline',
  designerProps: {
    propsSchema: createFieldSchema(AllSchemas.Timeline),
  },
  designerLocales: AllLocales.Timeline,
})

Timeline.Resource = createResource({
  icon: 'Timeline',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: 'Timeline',
        'x-component': 'Timeline',
        'x-component-props': {
          titleKey: 'remark',
          tipsKey: 'createTime',
        },
      },
    },
  ],
})
